<template>
  <view>
    <view class="title">
      <view style="padding: 60rpx 40rpx 48rpx 40rpx; display: flex">
        <view style="background: white; border-radius: 50%; padding: 28rpx;">
          <uni-icons style="width: 64rpx; height: 64rpx; color: #D5D5D5;" custom-prefix="custom-icon" type="person-filled" size="64rpx" color="#D5D5D5"></uni-icons>
        </view>
        <view style="display: flex; flex-direction: column; justify-content: center; margin-left: 16rpx; font-weight: 500; font-size: 40rpx; color: #FFFFFF;">
          {{ phone || '-' }}
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 96rpx; position:absolute; bottom: 112rpx;">
      <view style="padding: 0 32rpx; text-align: center;">
        <u-button text="退出登录" customStyle="border: 2rpx solid #3576F2; border-radius: 8rpx; color: #3576F2; font-size: 36rpx; font-weight: 600;" @click="loginOut"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { reset_token } from "@/auth/token";

  export default {
    data() {
      return {
        phone: null
      };
    },
    onLoad() {
      const _this = this
      uni.getStorage({
        key: 'phone',
        success: function (res) {
          _this.phone = res.data
        }
      });
    },
    methods: {
      loginOut() {
        reset_token()
        uni.navigateTo({
          url: '/pages/login/login'
        });
        // uni.switchTab({
        //   url: '/pages/login/login'
        // });
      }
    }
  }
</script>

<style lang="scss">
.title {
  background: #3576F2;
  width: 100%;
}
</style>
